<template>
    <div class="common-size reflection_container">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="analysis_chart">
            <div class="analysis_chart_box">
                <div ref="repairTime" class="chart-box">

                </div>
                <div class="y-name">单位：单</div>
                <div class="clear mark">
                    <div class="left"><i></i>内修</div>
                    <div class="left"><i></i>外修</div>
                </div>
                <h3>设备维修高质设备</h3>
            </div>
        </div>
        <div class="sending-book-text">
            <div   v-html="item" v-for="(item, index) in textData">
            </div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import {nuxtMixins} from '../assets/javascript/mixin'
  let echarts = require('echarts')
  export default {
    name: 'life_equip_repair_time_analysis',
    props: ['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        defaultOption:{
    tooltip : {
        trigger: 'item',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter:function(params){
            var res = params.name+':'+Math.abs(params.value)+'元'
            return res;
        }
    },

    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis : [
        {
            type : 'value',
            axisLabel:{
                formatter:function(value,index){
                    return Math.abs(value)
                }
            }
        }
    ],
    xAxis : [
        {
            type: 'category',
            show:true,

            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },

            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {

              textStyle: {
                color:'#989898'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(247,248,248,0.5)', 'rgba(0,0,0,0)'],
              }
            }
        }
    ],
    series : [
        {
            name:'内修',
            type:'bar',
            barWidth: '40%',
            stack: '总量',
            label: {
                normal: {
                }
            },
            data:[]
        },
        {
            name:'外修',
            type:'bar',
            stack: '总量',
            label: {
                normal: {
                    //show: true,
                    //position: 'left'
                }
            },
            data:[]
        }
    ]
},
        pageTitle: '生命支持类设备维修分析',
        detailTitle: '生命支持类设备维修时间分布'
      }
    },
    computed:{
      oneRemarkData () {
        return this.chartData.remark
      },
      linearData () {
        return [
            {start:'#9ec4e7',end:'#4b8bc9'},
            {start:'#a9d49e',end:'#70bf72'}
          ]
      },
      textData () {
        return this.chartData.textData
      },
    },
    created() {
    },
    mounted() {
      this.deviceNumChart()
    },
    methods: {
      deviceNumChart () {
        if(!this.chartData.chartData)return
        const that = this
        const chartData = this.chartData.chartData
        const barData = [];
        const colorStops = [];
        const linearData = this.linearData

        const option= {};
        for(var k in this.defaultOption){
            option[k] = this.defaultOption[k]
        }
        option.xAxis[0].data = chartData.x_data

        chartData.y_in.forEach((item,index) => {
            option.series[0].data.push({
                 value:item,
                 itemStyle:{
                     normal:{
                         color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                              offset: 0, color: that.linearData[0].start// 0% 处的颜色
                            }, {
                              offset: 1, color: that.linearData[0].end // 100% 处的颜色
                            }],
                            globalCoord: false
                        }
                     }
                 },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color:'#fff',
                            fontWeight: 'bolder',
                            fontSize: 14
                        },
                        formatter: x => Math.abs(x.value)
                    }
                }
            })
        })

       chartData.y_out.forEach((item,index) => {
            option.series[1].data.push({
                 value:-item,
                 itemStyle:{
                     normal:{
                         color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                              offset: 0, color: that.linearData[1].start// 0% 处的颜色
                            }, {
                              offset: 1, color: that.linearData[1].end // 100% 处的颜色
                            }],
                            globalCoord: false
                        }
                     }
                 },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color:'#fff',
                            fontWeight: 'bolder',
                            fontSize: 14
                        },
                        formatter: x => Math.abs(x.value)
                    }
                }
            })
        })


        this.liquidfillEchart = echarts.init(this.$refs.repairTime)
        this.liquidfillEchart.setOption(option)
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">

</style>
